<template>
  <view class="page bg-white">
    <!-- Content -->
    <view class="bg-login py-20">
      <!-- Logo and Welcome -->
      <view class="mb-6 flex flex-col px-4">
        <view class="mb-4 flex items-center gap-4">
          <text class="text-base text-[#265A63] font-bold">
            Hello！欢迎进入
          </text>
        </view>
        <text class="text-lg text-[#265A63] font-bold">
          西安旅游职业中等专业学校
        </text>
      </view>

      <!-- Login Card -->
      <!-- Login Tabs -->
      <u-row class="px-4">
        <u-col span="6" class="active-bg rounded-lt-8">
          <view class="pt-5 text-center text-xl fw-600">
            学生登录
            <view class="mt-2 w-full flex justify-center">
              <view class="border-type" />
            </view>
          </view>
        </u-col>
        <u-col span="6" class="no-active-bg">
          <view class="rounded-rt-8 pt-5 text-center text-xl text-#1A2B5C fw-600">
            教职工登录
            <view class="mt-2 w-full flex justify-center">
              <view class="border-type type-color" />
            </view>
          </view>
        </u-col>
      </u-row>
      <view class="mx-4 rounded-lb-8 rounded-rb-8 bg-white p-4 pt-2">
        <!-- Login Form -->
        <view class="mt-8 space-y-4">
          <u-input
            v-model="form.phone"
            placeholder="请输入手机号码"
            prefix-icon="/static/images/user.png"
            class="login-input"
            :class="{ loginFocused: isFocused }"
            border="surround"
            :focus="isFocused" @focus="handleFocus" @blur="handleBlur"
          />
          <u-input
            v-model="form.idNumber"
            placeholder="请输入身份证后6位"
            prefix-icon="/static/images/password.png"
            class="login-input"
            border="surround"
            :class="{ loginFocused: isFocused1 }"
            :focus="isFocused1" password @focus="handleFocus(1)"
            @blur="handleBlur(1)"
          />

          <!-- Agreement Checkbox -->
          <view class="flex items-center py-4">
            <up-checkbox-group v-model="form.agreement">
              <u-checkbox
                shape="circle"
                active-color="#00E0AE"
                class="flex-shrink-0"
              />
            </up-checkbox-group>
            <text class="text-sm text-xs text-#C5C9D1">
              我已查看并同意
              <text class="text-#3AA69B" @click="userServerPopupHandle">
                《用户服务协议及隐私政策》
              </text>
            </text>
          </view>

          <!-- Login Button -->
          <u-button
            size="default"
            shape="circle"
            class="gradient-button mb-8 mt-8"
            :disabled="!form.agreement.length"
            @click="handleLogin"
          >
            <text class="text-lg text-white">
              登录
            </text>
          </u-button>
        </view>
      </view>

      <view class="mt-5 px-8 text-center text-xs">
        账号问题，<text class="text-#3AA69B" @click="popupShow = true">
          点击这里
        </text>
      </view>
    </view>

    <!-- footer -->
    <view class="fixed bottom-0 left-0 right-0 bg-white px-4 py-3" style="bottom: calc(env(safe-area-inset-bottom) + 0px);">
      <view class="h-full flex items-center justify-center">
        <image class="h-5 w-5" src="/static/images/logo-g.png" mode="aspectFit" />
        <text class="ml-2 text-xs text-#C5C9D1">
          西安旅游职业中等专业学校
        </text>
      </view>
    </view>

    <!-- 用户须知 -->
    <u-popup :show="popupShow" mode="bottom" border-radius="14" :closeable="false">
      <view class="mt-8 px-4 text-sm text-gray-600 space-y-2">
        <view class="mb-2 text-center text-xl text-[#1A2B5C] fw600">
          用户须知
        </view>
        <view class="line-height-6">
          1. 新生登录账号为<text class="text-[#3AA69B]">
            招生志愿填报时
          </text>个人信息中的手机号码，密码为<text class="text-[#3AA69B]">
            身份证号后6位
          </text>。即此处的账号密码同录取查询处的账号密码一致。
        </view>
        <view class="line-height-6">
          2.如未在招生系统填报志愿，则账号密码为向学校相关部门提供过的手机号码和身份证号为准。
        </view>
        <view>3. 教职工账号为个人手机号码。</view>
        <view class="mb-2">
          <u-button
            size="default"
            shape="circle"
            class="gradient-button mb-8 mt-8"
            @click="popupShow = false"
          >
            <text class="text-lg text-white">
              我已了解
            </text>
          </u-button>
        </view>
      </view>
    </u-popup>

    <!-- 用户须知 -->
    <u-popup :show="popupShow" mode="bottom" border-radius="14" :closeable="false">
      <view class="mt-8 px-4 text-sm text-gray-600 space-y-2">
        <view class="mb-2 text-center text-xl text-#1A2B5C fw600">
          用户须知
        </view>
        <view class="line-height-6">
          1. 新生登录账号为<text class="text-#3AA69B">
            招生志愿填报时
          </text>个人信息中的手机号码，密码为<text class="text-#3AA69B">
            身份证号后6位
          </text>。即此处的账号密码同录取查询处的账号密码一致。
        </view>
        <view class="line-height-6">
          2.如未在招生系统填报志愿，则账号密码为向学校相关部门提供过的手机号码和身份证号为准。
        </view>
        <view>3. 教职工账号为个人手机号码。</view>
        <view class="mb-2">
          <u-button
            size="default"
            shape="circle"
            class="gradient-button mb-8 mt-8"
            @click="popupShow = false"
          >
            <text class="text-lg text-white">
              我已了解
            </text>
          </u-button>
        </view>
      </view>
    </u-popup>
    <!-- 用户服务协议与隐私政策 -->
    <UserServerPopup ref="userServerPopup" />
  </view>
</template>

<script setup>
import RoundSwitch from '@/components/round-switch/index';
import { reactive, ref } from 'vue';
import UserServerPopup from './user-server.vue';

const isTeacher = ref(false);

const form = reactive({
  phone: '',
  idNumber: '',
  agreement: false,
});
const popupShow = ref(false);

const handleLogin = () => {
  if (!form.phone || !form.idNumber) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    });
    return;
  }

  if (!form.agreement) {
    uni.showToast({
      title: '请同意用户协议',
      icon: 'none',
    });
    return;
  }

  // TODO: Implement login logic
  uni.showLoading({
    title: '登录中...',
  });

  setTimeout(() => {
    uni.hideLoading();
    uni.switchTab({
      url: '/pages/tab/home/index',
    });
  }, 1000);
};
const isFocused = ref(false);
const isFocused1 = ref(false);
const handleFocus = (type) => {
  if (type == 1) {
    isFocused1.value = true;
  }
  else {
    isFocused.value = true;
  }
};
const handleBlur = (type) => {
  if (type == 1) {
    isFocused1.value = false;
  }
  else {
    isFocused.value = false;
  }
};

// 用户服务协议与隐私政策
const userServerPopup = ref();
const userServerPopupHandle = () => {
  userServerPopup.value.init();
};
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
}

.login-input{
  background-color: #F5F9FC;
  height: 30px;
  border-radius: 30px  !important;
  padding-left: 20px !important;
  :deep(.u-icon__img){
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
  }
}
 .login-input:focus{
  background: #ffffff !important; ;
  :deep(div){
    filter: grayscale(0%);
  }
}
.loginFocused{
  background: #ffffff !important;
  :deep(.u-icon__img){
    filter: grayscale(0%);
  }
}
:deep(.u-tabs__wrapper__nav__line) {
  height: 3px;
  border-radius: 2px;
}

.bg-login{
  width: 100%;
  height: 50%;
  background: url('@/static/images/login-header.png') no-repeat ;
  background-size:100% 100%;
}
.border-type{
  width: 30px;
  height: 8px;
}
.type-color{
  border-radius: 15px;
  text-align: center;
  background: linear-gradient(90deg, #02CAB1, #F0CD42) center center;
  box-shadow: 1px 1px 5px #E0E7EC;
}

.active-bg{
  background: url('@/static/images/green-white-1.png') no-repeat;
  background-size:100% 100%;
  color: #6E7B8B;
}
.no-active-bg{
  background: url('@/static/images/green-white-2.png') no-repeat;
  background-size:100% 100%;
  color: #6E7B8B;
}
.fixed-bottom {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
:deep(.u-popup__content){
  border-radius: 15px 15px 0px 0px;
}
</style>
